How to add custom Angular Material Theme in Angular 6.
This Blog has been moved from Medium to blogs.tensult.com. All the latest content will be available there. Subscribe to our newsletter to stay updated.
Nowadays, the usage of Angular Material design in an Angular application is very common. Angular Material gives you nice inbuilt design features to design your Angular components seamlessly. In this blog, I will explain how to write a custom angular-material-theme for an Angular application.
So, let’s go ahead, I am assuming that you are already running an Angular 6 Application with an Angular Material. If you have not set up your Angular application with Angular Material, you can do it from here.
After the Angular Material has been set up in your application, one default angular-material-theme will be set in your application. You also have an option to change the default angular-material-theme with other pre-built angular-material-themes. There are few pre-built Angular Material themes to choose from, available in Angular Material, and they are the following
* deeppurple-amber.css
* indigo-pink.css
* pink-bluegrey.css
* purple-green.css
You can replace the default angular-material-theme with one of the above-mentioned angular-material-themes using the following ways.
- You can directly include the pre-built angular-material-theme in the styles.css file.
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';2. Add the following inside the head tag of “index.html” file.
<link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">3. Update the following in “angular.json” file.
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
},"src/styles.css"
],
For changing the set of colors of the existing prebuilt theme of the Angular Material you need to design a custom angular-material-theme. Here I will show you a demo on how to change the set of colors of the prebuilt angular-material-theme.
Let’s started with the demo for custom angular-material-theme.
- Now add MatFormFieldModule, MatButtonModule and MatInputModule modules in NgModule imports array in the app.module.ts file. Your file should look something like this:
2. Create one component and update the following in that.
3. As we are dealing with the single component we are not putting any routing logic here. Just update with the following in the app.component.html.
4. Now run the Angular application using “ng serve” command, it will reflect the prebuilt theme colors of Angular Material. By default, the Angular Material pre-built theme primary color is deep-purple, so that will be triggered on the design.
5. Now suppose you want to set your own color on the form-field borderline and in button, you can’t change the color manually as you are using an angular-material-theme, so for this, you need to write a custom angular-material-theme to change the set of colors of the prebuilt theme. Here is the Angular Material custom theme example to change the set of colors of your angular-material-theme.
6. To apply the Angular material custom theme in your Angular app, just add the custom theme file name in angular.json styles array like this.
"styles": [
{
"input": "src/custom-theme.scss"
},"src/styles.css"
],
Voila! Now you have successfully implemented your custom theme in your Angular application. To see your custom theme in effects in your application just run your application and you will be able to see the changes like this.
Conclusion
In the custom theme I set, the primary color as black. You can choose your own color from here. Thank you for reading my blog. Kindly share your thoughts on this and if you find any difficulties, do share your doubts in the responses section below.
